<template>
  <div class="page-container">
    <div class="in-container search-form-box">
      <AppSearchFormHidden
        class="search-form"
        ref="searchFormRef"
        size="small"
        :label-width="'auto'"
        :submitAfterReset="true"
        :model="query"
        @search="search"
        @reset="reset"
      >
        <template #default>
          <el-row :gutter="8">
            <el-col :span="5">
              <el-form-item label="实际开航">
                <el-date-picker
                  v-model="query.atd"
                  type="daterange"
                  value-format="YYYY-MM-DD"
                  range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="单位名称">
                <selectDown
                  v-model:modelData="query.entId"
                  selectKey="entId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="业务员">
                <selectDown
                  v-model:modelData="query.salesId"
                  selectKey="salesId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="币种">
                <selectDown
                  v-model:modelData="query.currency"
                  selectKey="currency"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="状态">
                <el-select v-model="query.feeStatus" clearable>
                  <el-option :value="0" label="未收" />
                  <el-option :value="1" label="已收" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="5">
              <el-form-item label="接单日期">
                <el-date-picker
                  v-model="query.recDate"
                  type="daterange"
                  value-format="YYYY-MM-DD"
                  range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="业务编号">
                <el-input
                  v-model="query.doccode"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="费用类型">
                <selectDown
                  v-model:modelData="query.feeName"
                  selectKey="feeName"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="目的港">
                <selectDown
                  v-model:modelData="query.portDestinationId"
                  selectKey="portDestinationId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="审核状态">
                <el-select v-model="query.checkStatus" clearable>
                  <el-option :value="0" label="未审" />
                  <el-option :value="1" label="已审" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template #hidden>
          <el-row :gutter="8">
            <el-col :span="5">
              <el-form-item label="装箱日期">
                <el-date-picker
                  v-model="query.packTime"
                  type="daterange"
                  value-format="YYYY-MM-DD"
                  range-separator="~"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="提单号">
                <el-input v-model="query.blNo" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="操作员">
                <selectDown
                  v-model:modelData="query.operaterId"
                  selectKey="operaterId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="箱封号">
                <el-input v-model="query.ctnNo" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="开票状态">
                <el-select v-model="query.invoiceCodeStatus" clearable>
                  <el-option :value="0" label="未开票" />
                  <el-option :value="1" label="已开票" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="8">
            <el-col :span="5">
              <el-form-item label="船名">
                <selectDown
                  v-model:modelData="query.vessel"
                  selectKey="vessel"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="航次">
                <el-input v-model="query.voyage" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="订舱名称">
                <selectDown
                  v-model:modelData="query.bookingAgentId"
                  selectKey="bookingAgentId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="客户单号">
                <el-input v-model="query.custDocNo" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="发票号">
                <el-input v-model="query.invoiceCode" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
        </template>
        <template #append>
          <!-- <el-button size="small" type="primary" @click="">报表</el-button> -->
        </template>
      </AppSearchFormHidden>
    </div>
    <div class="in-container table-box">
      <!-- <div>
        <el-button type="primary" @click="">导出Execl</el-button>
      </div> -->
      <AppPageTable
        class="table"
        stripe
        :data="tableData.data"
        :autostyle="'height: calc(100% - 1px) ;'"
        :option="tableData.option"
        :summaryMethod="sumTabel"
        :showSummary="true"
        :sumText="'合计'"
        @change="getTableData()"
      >
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="业务编号"
          prop="doccode"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="单位编号"
          prop="entCode"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="单位名称"
          prop="entFullname"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="接单日期"
          prop="recDate"
        />
        <el-table-column
          width="160px"
          show-overflow-tooltip
          align="center"
          label="实际开航日期"
          prop="atd"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="费用类型"
          prop="feeName"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="件数"
          prop="digit"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="重量"
          prop="grossWeight"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="体积"
          prop="volume"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="审核"
          prop="checkStatus"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="审核日期"
          prop="checkTime"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="发票号码"
          prop="invoiceCode"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="提单号"
          prop="blNo"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="船名"
          prop="vessel"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="航次"
          prop="voyage"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="开票日期"
          prop="invoiceDate"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="起运港"
          prop="portDepartureName"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="目的港"
          prop="portDestinationName"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="操作员"
          prop="userName"
        />
        <el-table-column
          width="100px"
          show-overflow-tooltip
          align="center"
          label="订舱单位"
          prop="bookingAgentName"
        />
        <el-table-column
          show-overflow-tooltip
          align="center"
          v-for="item in tableData.title"
          :label="item.currencyName"
          :key="item.currencyCode"
          :prop="item.currencyCode"
        >
          <el-table-column
            show-overflow-tooltip
            align="center"
            v-for="t in item.child"
            :label="t.title"
            :key="t.key"
            :prop="t.key"
          >
          </el-table-column>
        </el-table-column>
      </AppPageTable>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchFormHidden from "@/components/AppSearchFormHidden.vue";
import selectDown from "./components/selectDown.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
export default defineComponent({
  components: {
    AppSearchFormHidden,
    selectDown,
    AppPageTable,
  },
  data() {
    return {
      query: {
        atd: "", //实际开航
        entId: "", //单位名称
        salesId: "", //业务员
        currency: "", //币种
        feeStatus: "", //状态

        recDate: "", //接单日期
        doccode: "", //业务编号
        feeName: "", //费用类型
        portDestinationId: "", //目的港
        checkStatus: "", //审核状态

        packTime: "", //装箱日期
        blNo: "", //提单号
        operaterId: "", //操作员
        ctnNo: "", //箱封号
        invoiceCodeStatus: "", //开票状态

        vessel: "", //船名
        voyage: "", //航次
        bookingAgentId: "", //订舱名称
        custDocNo: "", //客户单号
        invoiceCode: "", //发票号
      },
      tableData: {
        data: [],
        title: [],
        option: useTableOption(),
      },
    };
  },
  methods: {
    sumTabel({ columns, data }) {
      let sumText = [];
      columns.forEach((t, index) => {
        if (index === 0) {
          sumText[index] = "合计";
          return;
        }
        if (t.label == "应收" || t.label == "已收" || t.label == "未收") {
          const values = data.map((item) => Number(item[t.property]));
          if (!values.every((value) => Number.isNaN(value))) {
            sumText[index] = `${values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!Number.isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)}`;
          } else {
            sumText[index] = "N/A";
          }
        } else {
          sumText[index] = "";
        }
      });
      return sumText;
    },
    search() {
      this.tableData.option.page = 1;
      this.getTableData();
    },
    reset() {
      this.query = {
        atd: "", //实际开航
        entId: "", //单位名称
        salesId: "", //业务员
        currency: "", //币种
        feeStatus: "", //状态

        recDate: "", //接单日期
        doccode: "", //业务编号
        feeName: "", //费用类型
        portDestinationId: "", //目的港
        checkStatus: "", //审核状态

        packTime: "", //装箱日期
        blNo: "", //提单号
        operaterId: "", //操作员
        ctnNo: "", //箱封号
        invoiceCodeStatus: "", //开票状态

        vessel: "", //船名
        voyage: "", //航次
        bookingAgentId: "", //订舱名称
        custDocNo: "", //客户单号
        invoiceCode: "", //发票号
      };
      this.tableData.option.page = 1;
      this.tableData.option.pageSize = 10;
      this.getTableData();
    },
    getTableData() {
      this.tableData.option.loading = true;
      let param = JSON.parse(
        JSON.stringify({
          ...this.query,
          PageIndex: this.tableData.option.page,
          PageSize: this.tableData.option.pageSize,
        })
      );
      const queryString = Object.keys(param).map((key) => {
        // 如果数组非空，则按照多个参数处理
        if (Array.isArray(param[key]) && param[key].length > 0) {
          return param[key]
            .map((value) => `${key}=${encodeURIComponent(value)}`)
            .join("&");
        }
        // 处理其他类型的参数
        return `${key}=${encodeURIComponent(param[key] || "")}`;
      }).join('&');
      this.$http
        .get(`/api/report/getNotReceivedDetails?${queryString}`)
        .then((res) => {
          this.tableData.data = res.content;
          this.tableData.title = this.changeTableCurreny(res.title);
          this.tableData.option.total = res.totalElements;
        })
        .finally(() => (this.tableData.option.loading = false));
    },
    /**
     * @typedef {Object} MyObject
     * @property {String} key - 键值
     * @property {String} title - 标题
     * @property {Array.<MyObject>} child - 子对象数组
     *
     * 动态渲染表格货币
     * @param {Array<{key:String,title:String}>} data
     * @returns {Array.<MyObject>}
     */
    changeTableCurreny(data) {
      return data.map((t) => {
        t.child = [];
        t.child.push({ key: `ys${t.currencyCode}`, title: "应收" });
        t.child.push({ key: `has${t.currencyCode}`, title: "已收" });
        t.child.push({ key: `ws${t.currencyCode}`, title: "未收" });
        return t;
      });
    },
  },
  mounted() {
    this.getTableData();
  },
});
</script>

<style lang="scss" scoped>
.page-container {
  display: flex;
  flex-direction: column;

  :deep(.el-date-editor) {
    width: 100%;
  }
  .search-form-box {
    height: auto;
    margin-bottom: 8px;
  }
  .table-box {
    flex: 1;
  }
}
</style>
